import {useState} from 'react'
import { useNavigate } from 'react-router-dom'
import { NavBar,Input,Button,Toast } from 'react-vant';
import {useSearchParams} from 'react-router-dom'
import axios from 'axios'
import './index.css'
import { api } from '../../luyou/index'
export default function Up() {
  const naviate = useNavigate()
  let [searchParams,setSearchParams]=useSearchParams()
  let phone=searchParams.get('id')
  let [tel,settel] = useState('')
  let [flag,setflag] = useState(false)
  let [flag2,setflag2] = useState(false)
  let telyan=()=>{
    if(tel.length==0){
      setflag(true)
    }else{
      if(tel.length>=6 && tel.length<=12){
        setflag2(false)
      }else{
        setflag2(true)
      setflag(false)
    }
  }
}
  let update=async()=>{
    let {data}=await api.post('/updatepassword',{phone:phone,password:tel})
    console.log(data)
    if(data.code==200){
      Toast.success('修改成功')
      naviate('/')
    }
  }
  return (
    <div>
         <NavBar
            title="忘记密码"
            onClickLeft={() => naviate('/updatepass')}
        />
        <div className='U_box'>
            <div>
                <Input
                    value={tel}
                    type='password'
                    onChange={tel => settel(tel)}
                    placeholder='请输入6-12位字母、数字'
                    onBlur={telyan}
                />
                <span className={flag?'U_xian':'U_xiao'}>请设置密码</span><br />
                <span className={flag2?'U_xian':'U_xiao'}>请输入6-12位字母，数字</span>
            </div>
            <Button onClick={()=>update()} style={{width:'2rem',height:'0.6rem',marginTop:'0.2rem',backgroundColor:'#ff2630',color:'white',borderRadius:'0.4rem'}}>保存新密码</Button>
        </div>
    </div>
  )
}
